﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/Easy_UI/css/easyui.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/icon.css" rel="stylesheet" />
    <link href="~/Content/Easy_UI/css/menu.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Content/Easy_UI/js/datapattern.js"></script>
    <script src="~/Content/Easy_UI/js/easyui-lang-zh_CN.js"></script>
    <script src="~/Content/Easy_UI/js/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //隐藏添加,修改From表单
            $("#addDiv").css("display", "none");
            $("#editDiv").css("display", "none");

            loadData();
        });

        //加载数据
        function loadData(pars) {
            $('#tt').datagrid({
                url: '/ActionInfo/ShowAllAction',
                title: '权限数据',
                width: 800,
                height: 505,
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'Id',//主键列的列明
                loadMsg: '正在加载权限信息...',
                pagination: true,//是否有分页
                singleSelect: false,//是否单行选择
                pageSize: 5,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [5, 10, 15],
                queryParams: pars,//往后台传递参数
                columns: [[
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
                    { field: 'Id', title: '编号', width: 80 },
                    { field: 'ActionName', title: '权限', width: 120 },
                    {
                        field: 'IsMenu', title: '是否为菜单项', width: 120,
                        formatter: function (value, row, index) {
                            return value ? "是" : "否";
                        }
                    },
                    { field: 'Remark', title: '备注', width: 120 },
                    { field: 'Sort', title: '序号', width: 120 }
                ]],
                toolbar: [{
                    id: 'btnDelete',
                    text: '删除',
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteInfo();
                    }
                }, {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {
                        addInfo();
                    }
                }, {
                    id: 'btnEidt',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {

                        showEditInfo();//展示要修改的用户数据
                    }
                }],
            });
        }

        //删除数据
        function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (!rows || rows.length == 0) {
                //alert("请选择要删除的商品！");
                $.messager.alert("提醒", "请选择要删除的记录!", "error");
                return;
            }

            $.messager.confirm("提示", "确定要删除数据吗？", function (r) {
                if (r) {
                    //要删除数据，获取要删除的记录的Id
                    var strId = "";
                    for (var i = 0; i < rows.length; i++) {
                        strId = strId + rows[i].Id + ",";
                    }
                    //去掉最后一个逗号“，”
                    strId = strId.substr(0, strId.length - 1);
                    //将获取的要删除的记录的Id值发送到服务端
                    $.post("/ActionInfo/Delete", { "strId": strId }, function (data) {
                        if (data == "ok") {
                            //"reload"方法加载表格不会跳转到第一页
                            $('#tt').datagrid("reload");

                            //清除上次操作的历史的记录 异步请求会把上次操作的id继续带上
                            $('#tt').datagrid('clearSelections');
                        }
                        else {
                            $.messager.alert("提醒", "删除失败！", "error")
                        }
                    });
                }
            });
        }

        //添加数据
        function addInfo() {
            $("#addDiv").css("display", "block");
            $("#addDiv").dialog({
                collapsible: true,//可折叠
                maximizable: true,//可最大化
                minimizable: true,//可最小化
                resizable: true,//可缩放
                modal: true,//制造一种模态
                buttons: [{
                    text: "确定",
                    iconCls: "icon-ok",
                    handler: function (data) {
                        //在表单提交之前要校验数据的合理性
                        validateInfo($("#addForm"));

                        $("#addForm").submit();//提交表单
                    }
                }, {
                    text: '取消',
                    handler: function () {
                        $("#addDiv").dialog("close");
                    }
                }]
            });
        }

        //完成添加后调用该方法
        function afterAdd(data) {
            if (data = "ok") {
                $("#addDiv").dialog("close");
                $.messager.alert("提示", "添加成功");
                //"reload"方法加载表格不会跳转到第一页
                $('#tt').datagrid("reload");

                //添加用户的操作是一个异步操作 清空文本框
                $("addForm input").val("");
            }
            else {
                $.messager.alert("提示", "添加失败");
            }
        }

        //表单校验
        function validateInfo(control) {
            control.validate({//表示对哪个form表单进行校验，获取form标签的id属性的值
                rules: {//表示验证规则
                    UName: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                    ShowName: "required",
                    UPwd: {
                        required: true,
                        minlength: 5
                    }
                },
                messages: {
                    UName: "请输入用户名",
                    ShowName: "请输入姓名",
                    UPwd: {
                        required: "请输入密码",
                        minlength: jQuery.format("密码不能小于{0}个字符")
                    }
                }
            });
        }

        //展示要修改的用户数据
        function showEditInfo() {
            //在弹窗之前要拿到要修改的用户的数据
            //判断一下用户是否选择了要修改的数据
            var rows = $("#tt").datagrid("getSelections");//获取所选择的行
            if (rows.length != 1) {
                $.messager.alert("提示", "请选择要修改的数据", "error");
                return;//跳出此方法
            }

            //将要修改的数据查询出来，显示到文本框中
            var id = rows[0].Id;
            $.get("/ActionInfo/EditAction", { "id": id }, function (data) {
                //这里其实返回回来的是一个json对象,进行数据绑定
                $("#txtId").val(data.Id);
                $("#txtDelFlag").val(data.DelFlag);
                $("#textActionName").val(data.ActionName);
                $("#txtCreateTime").val(data.CreateTime);
                $("#textActionUrl").val(data.ActionUrl);
                $("#textMenuIcon").val(data.MenuIcon);
                $("#textHttpMethod").val(data.HttpMethod);
                if (data.IsMenu == "0") {
                    $("#textIsMenu_1").attr("checked", true);
                }
                else {
                    $("#textIsMenu_2").attr("checked", true);
                }
                $("#textSort").val(data.Sort);
                $("#textRemark").val(data.Remark);
            });

            $("#editDiv").css("display", "block");
            $("#editDiv").dialog({
                collapsible: true,//可折叠
                maximizable: true,//可最大化
                minimizable: true,//可最小化
                resizable: true,//可缩放
                modal: true,//制造一种模态
                buttons: [{
                    text: "ok",
                    iconCls: "icon-ok",
                    handler: function (data) {
                        //在表单提交之前要校验数据的合理性
                        validateInfo($("#editForm"));

                        $("#editForm").submit();//提交表单
                    }
                }, {
                    text: 'Cancel',
                    handler: function () {
                        $("#editDiv").dialog("close");
                    }
                }]
            });
        }

        //更新以后调用的方法
        function afterEdit(data) {
            if (data = "ok") {
                $("#editDiv").dialog("close");
                $.messager.alert("提示", "更新成功");
                //"reload"方法加载表格不会跳转到第一页
                $('#tt').datagrid("reload");
            }
            else {
                $.messager.alert("提示", "更新失败");
            }
        }
    </script>
</head>
<body>
    <div>
        <table id="tt" style="width:600px;" title="标题" iconcls="icon-edit"></table>
    </div>
    <!-----------------------添加数据------------------------------>
    <div id="addDiv" style="width:400px;height:300px;" title="添加用户数据">
        @using (Ajax.BeginForm("AddAction", "ActionInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterAdd" }, new { id = "addForm" }))
        {
            <table>
                <tr><th>权&nbsp;限&nbsp;名:</th><td><input type="text" name="ActionName" /></td></tr>
                <tr><th>地&nbsp;址:</th><td><input type="text" name="ActionUrl" /></td></tr>
                <tr><th>图&nbsp;标:</th><td><input type="text" name="MenuIcon" /></td></tr>
                <tr>
                    <th>请&nbsp;求&nbsp;方&nbsp;式:</th>
                    <td>
                        <select name="HttpMethod">
                            <option value="Get">
                                Get请求
                            </option>
                            <option value="Post">
                                Post请求
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>是&nbsp;否&nbsp;为&nbsp;菜&nbsp;单&nbsp;项:</th>
                    <td>
                        <input type="radio" name="IsMenu" value="0" />否
                        <input type="radio" name="IsMenu" value="1" />是
                    </td>
                </tr>
                <tr><th>序&nbsp;号:</th><td><input type="text" name="Sort" /></td></tr>
                <tr><th>备&nbsp;注:</th><td><input type="text" name="Remark" /></td></tr>
            </table>
        }
    </div>

    <!-----------------------修改数据------------------------------>
    <div id="editDiv" style="width:400px;height:300px;" title="修改用户数据">
        @using (Ajax.BeginForm("EditAction", "ActionInfo", new { }, new AjaxOptions { HttpMethod = "post", OnSuccess = "afterEdit" }, new { id = "editForm" }))
        {
            <input type="hidden" name="Id" id="txtId" />
            <input type="hidden" name="DelFlag" id="txtDelFlag" />
            <input type="hidden" name="CreateTime" id="txtCreateTime" />
            <table>
                <tr><th>权&nbsp;限&nbsp;名:</th><td><input type="text" name="ActionName" id="textActionName" /></td></tr>
                <tr><th>地&nbsp;址:</th><td><input type="text" name="ActionUrl" id="textActionUrl" /></td></tr>
                <tr><th>图&nbsp;标:</th><td><input type="text" name="MenuIcon" id="textMenuIcon" /></td></tr>
                <tr>
                    <th>请&nbsp;求&nbsp;方&nbsp;式:</th>
                    <td>
                        <select name="HttpMethod" id="textHttpMethod">
                            <option value="Get">
                                Get请求
                            </option>
                            <option value="Post">
                                Post请求
                            </option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <th>是&nbsp;否&nbsp;为&nbsp;菜&nbsp;单&nbsp;项:</th>
                    <td>
                        <input type="radio" id="textIsMenu_1" name="IsMenu" value="0" />否
                        <input type="radio" id="textIsMenu_2" name="IsMenu" value="1" />是
                    </td>
                </tr>
                <tr><th>序&nbsp;号:</th><td><input type="text" name="Sort" id="textSort" /></td></tr>
                <tr><th>备&nbsp;注:</th><td><input type="text" name="Remark" id="textRemark" /></td></tr>
            </table>
        }
    </div>
</body>
</html>
